<template>
  <div class="container-fluid container-lg grid-setting">
    <div class="vld-parent">
      <loading :active.sync="isLoading"></loading>
    </div>
    <!-- 流程 -->
    <ol class="row justify-content-center list-unstyled mb-4 mb-md-6">
      <li class="col-md-3 col-lg-2 text-center py-1 py-md-3 mx-4 mx-md-2 bg-primary-300"
        >
        <span class="font-sm font-h6-md text-brown d-block font-weight-bold">STEP</span>
        <span class="h5 font-h4-md text-brown d-block py-md-1 font-family-roboto">01</span>
        <p class="font-sm font-h6-md text-brown">确认清单内容</p>
      </li>
      <li class="col-3 col-lg-2 text-center d-none d-md-block py-3 mx-2 bg-gray-100"
        >
        <span class="h6 text-secondary d-block">STEP</span>
        <span class="h4 text-secondary d-block py-md-1 font-family-roboto">02</span>
        <p class="text-secondary">填写订购数据</p>
      </li>
      <li class="col-3 col-lg-2 text-center d-none d-md-block py-3 mx-2 bg-gray-100"
        >
        <span class="h6 text-secondary d-block">STEP</span>
        <span class="h4 text-secondary d-block py-md-1 font-family-roboto">03</span>
        <p class="text-secondary">付款/完成订单</p>
      </li>
    </ol>
    <div class="row justify-content-center">
      <!-- 購物車清單-->
      <div class="col-md-7" >
        <!-- 沒有商品 -->
        <div class="jumbotron text-center rounded-0 mb-6"
          v-if="carts.length === 0">
          <div class="h4 text-base mb-5">购物车内无商品</div>
          <router-link class="btn btn-lg btn-primary py-1 mt-4 rounded-0"
            :to="{ name: 'Products' }" >
            前往购物</router-link>
        </div>
        <h2 class="h4 text-base bg-light text-center py-4 rounded-top"
          v-if="carts.length !== 0">购物清单</h2>
        <table class="table border border-light mb-6 table-hoverShadow"
          v-if="carts.length !== 0">
          <thead>
            <tr>
              <th class="text-center d-none d-xs-table-cell" scope="col"></th>
              <th class="text-left" scope="col">品名</th>
              <th class="text-center" scope="col">数量</th>
              <th class="text-center" scope="col">价格</th>
              <th class="text-right" scope="col"></th>
            </tr>
          </thead>
          <tbody>
            <tr class="cursor-pointer hover--shadow"
              v-for="cart in carts" :key="cart.id"
              @click="productLink(cart.itemId)">
              <td class="table-img align-middle d-none d-xs-table-cell">
                <img class="img-cover"
                  :src="cart.itemVO.imageUrl"
                  :alt="cart.itemVO.name">
                  </td>
              <td class="align-middle">
                <span class="text-success line-height-1 d-none d-md-block font-sm"
                  v-if="cart.price!==cart.finalPrice">
                  (已打折)</span>
                <h3 class="h6 font-h5-sm text-base">
                  {{ cart.itemVO.name }}
                  <span class="text-success d-none d-sm-inline d-md-none font-xs"
                    v-if="cart.price!==cart.finalPrice">(已打折)</span>
                </h3>
              </td>
              <td class="align-middle text-center font-xs font-sm-sm font-h6-md">
                {{ cart.num }}/{{ cart.itemVO.unit }}
              </td>
              <td class="align-middle text-center text-dark h6 font-h5-sm font-family-roboto">
                {{ cart.finalPrice | currency }}
              </td>
              <td class="align-middle text-center" width="20">
                <a class="btn text-danger btn-del pl-1"
                  @click.stop.prevent="removeCart(cart.id)">

                  <i class="fas fa-trash-alt" ></i>
                </a>
              </td>
            </tr>
          </tbody>
        </table>
        <router-link class="btn-light text-center text-decoration-none d-none d-md-block py-2 my-6"
          :to="{ name: 'Products' }"
          v-if="carts.length !== 0">
          <i class="fas fa-arrow-left"></i>
           返回商店</router-link>
      </div>
      <!-- 購物車合計-折價券-->
      <div class="col-md-5" data-aos="fade-down" data-aos-delay="150">
        <div class="card p-4 shadow mb-6">
          <h4 class="h5 text-base text-center border-bottom d-flex justify-content-center pb-4">
            购 物 车 合 计
            <span class="badge badge-pill badge-warning text-white ml-2">
              {{ carts.length }}</span>
          </h4>
          <div class="card-body">
            <div class="d-flex mb-3">
              <h5 class="text-base">总计</h5>
              <span class="h5 ml-auto text-dark font-family-roboto">
                {{ carts_price | currency }}</span>
            </div>
            <div class="d-flex align-items-end mb-4 text-nowrap"
              v-if="carts_price!== carts_final_price">
              <p class="text-base line-height-1">折扣价
                <span class="text-success d-block font-xs">
                  使用『OPEN80OFF』优惠</span>
              </p>
              <h4 class="h3 ml-auto text-success font-family-roboto">
                {{ carts_final_price | currency }}</h4>
            </div>
            <div class="input-group mb-1">
              <input type="text" class="form-control"
                placeholder="请输入优惠序列号"
                aria-label="add Coupon Code"
                v-model="couponCode">
              <div class="input-group-append">
                <a class="btn btn-outline-secondary py-2" href="#"
                  @click.prevent="addCouponCode"
                  :class="{ 'disabled': carts.length === 0 }">使用优惠</a>
              </div>
            </div>
            <p class="text-info line-height-1 mb-5 font-xs">
              现在输入『OPEN80OFF』即可享有全馆8折优惠喔！
            </p>
            <router-link class="btn btn-sm-sm btn-block btn-warning btn-lg rounded-0 text-white"
              :to="{ name: 'ConsumerForm' }"
              :class="{ 'disabled': carts.length === 0 }">
              确认商品
              <i class="fas  fa-arrow-right"></i>
            </router-link>
          </div>
        </div>
        <div class="px-8 my-6">
          <router-link class="d-block btn-light py-2 text-center text-decoration-none d-md-none"
            :to="{ name: 'Products' }"
            v-if="carts.length !== 0">
            <i class="fas fa-arrow-left"></i>
             返回商店</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../../components/Header.vue'
export default {
  filters:{
    currency(num) {
      if (num) {
        const n = Number(num)
        return `$ ${n.toFixed(0).replace(/./g, (c, i, a) => {
          const currency = i && c !== '.' && (a.length - i) % 3 === 0 ? `, ${c}`.replace(/\s/g, '') : c
          return currency
        })}`
      }
      return '$ 0'
    }
  },
  data () {
    return {
      carts:[],
      carts_price:'1000',
      carts_final_price:'999',
      isLoading: false,
      couponCode:''
    }
  },
  methods:{
      async getCarts(id) {
          if(this.$bus.USER_Id === null) {
              this.$router.push('login')
              return
         }
         const {data: result} =  await this.$http.get('/cart/getList/'+id)
         if(result.status !== 200) return this.$message.error("2222")
         this.carts = result.data
         console.log(this.carts)
      }
  },
  created() {
    if(this.$bus.USER_Id === null) {
          this.$router.push('login')
          return
    }
    this.getCarts(this.$bus.USER_Id)
  }

}
</script>

<style scoped lang="scss">
.btn-del {
  padding-top: 0;
  padding-bottom: 0;
  &:hover,
  &:focus {
    padding-right: 9px;
    font-size: 1.2rem;
  }
}
</style>
